解决安卓系统h5页面fixed布局失效，被软键盘顶起的情况

2024-05-21 01:38| 来源: 网络整理| 查看: 265

问题描述

开发的 h5 页面嵌套在 app 中，点击 input 输入框后调起系统自带软键盘。其中 ios 系统正常展示，fixed 布局正常，底部 fixed 固定被软键盘遮挡（如图右）。android 系统调起软键盘后底部固定跟随软键盘一并移动。从个人角度来看 android 中的效果其实没什么影响，功能一切正常，测试将情况反馈给产品后产品要求按照 ios 系统展示的形式修改。

问题原因

在 ios 中调起系统键盘后 clientHeight 高度同之前一样不变，而在 android 中调起系统键盘后 clientHeigth 会被压缩，关闭键盘后 clientHeigth 又会恢复成之前高度，所以 android 底部固定会因为视图区高度的变化而跟着变化。

解决方案

这里要解决的问题是 android 系统中底部 fixed 不会被软键盘影响从而遮挡，所以可以通过监听页面 clientHeight 的高度变化去隐藏底部的 fixed 固定来解决这种特殊情况。代码如下↓

mounted() { this.docmHeight = document.documentElement.clientHeight || document.body.clientHeight; this.bottomBtnHeight = document.querySelectorAll('.bottom-btn')[0].offsetHeight; window.addEventListener('resize', this.getShowHeight) }, methods: { getShowHeight() { this.showHeight = document.documentElement.clientHeight || document.body.clientHeight const diff = this.docmHeight - this.showHeight if (this.showHeight < this.docmHeight && diff > 100) { // 隐藏 document.querySelectorAll('.bottom-btn')[0].style.display = 'none'; document.querySelectorAll('.wrap')[0].style.bottom = 0; } else { // 显示 document.querySelectorAll('.bottom-btn')[0].style.display = 'block'; document.querySelectorAll('.wrap')[0].style.bottom = `${this.bottomBtnHeight}px`; } }, }

【本文地址】

公司简介

联系我们